<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-03-22 10:46:52
-->
<template>
  <van-nav-bar
    title="地址管理"
    left-text="返回"
    left-arrow
    fixed
    @click-left="onClickLeft"
  />
  <div class="list" v-if="list.length">
    <div class="item" v-for="item in list" :key="item.id">
      <div class="title">
        姓名:{{ item.name }} 电话:{{ item.mobile }}
        <van-tag type="danger" round v-if="item.isDefault == 1">默认</van-tag>
      </div>
      <div class="address">{{ item.address }}</div>
      <div class="detail">详细地址:{{ item.addr }}</div>
      <van-icon name="delete-o" class="del_icon" @click="handleDel(item)" />
      <van-switch v-model="item.isDefault" @change="handleChange(item)" size="small" class="switch"/>
    </div>
  </div>
  <div v-else>
    <van-empty description="暂无地址信息" />
  </div>
  <van-button type="primary" block round @click="handleAdd"
    >新增地址</van-button
  >

  <AddAddr ref="AddAddr" @handleSucc="init"></AddAddr>
</template>



<script >
import { Toast } from "vant";
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ApiGetAddrList,ApiDelAddr ,ApiSetDefaultAddr} from "../../../api/mall";
import AddAddr from "./addAddr.vue";
export default defineComponent({
  components: {
    AddAddr,
  },
  setup() {
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    onMounted(() => {
      init();
    });

    const list = ref([]);
    const init = async () => {
      const res = await ApiGetAddrList({});
      if (res && res.length) {
        res.forEach(el=>{
          if(el.isDefault==1){
            el.isDefault = true
          }else{
            el.isDefault = false
          }
        })
        list.value = res;
      }
    };

    const AddAddr = ref();
    const handleAdd = () => {
      console.log(AddAddr.value);
      AddAddr.value.show = true;
    };

    const handleDel = async(item)=>{
      const res = await ApiDelAddr({id:item.id})
      if(typeof res === 'object'){
        Toast.success('删除成功')
        init()
      }
    }

    const handleChange = async(item)=>{
      const res = await ApiSetDefaultAddr({id:item.id})
      if(typeof res === 'object'){
        Toast.success('设置成功')
        init()
      }
    }
    return {
      AddAddr,
      list,
      init,
      onClickLeft,
      handleAdd,
      handleDel,
      handleChange
    };
  },
});
</script>



<style lang="scss" scoped>
.list {
  margin-top: 50px;
  font-size: 14px;
  .item {
    height: 80px;
    margin: 10px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    position: relative;
    border-bottom: 1px solid #ebe5e5;
    .title {
      font-size: 16px;
    }
    .address {
      color: #3d3c3c;
      margin: 5px 0;
    }
    .detail {
      color: #3d3c3c;
      margin: 5px 0;
    }
  }
}
button {
  width: 80%;
  position: fixed;
  bottom: 10px;
  left: 10%;
}
.del_icon {
  position: absolute;
  font-size: 28px;
  right: 20px;
  color: red;
}
.edit_icon {
  position: absolute;
  font-size: 28px;
  right: 20px;
  color: #18ce12;
  top: 50px;
}
.switch{
  position: absolute;
  top: 50px;
  right: 20px;
}
</style>